"use client";

import Image from "next/image";
import { Button, Modal, Row, Upload, message } from "antd";
import { useState } from "react";
import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";
import { UploadOutlined, StarOutlined } from "@ant-design/icons";

// async function getPic(imgId) {
//   const response = await fetch(`http://localhost:3000/imgs/${imgId}.webp`);
//   const imageBlob = await response.blob();
//   return URL.createObjectURL(imageBlob);
// }

export function ImgS({ urls }: { urls: string[] }) {
  const [index, setIndex] = useState(0);
  const [open, setOpen] = useState(false);

  const onChangeUrl = (url: string) => {
    setIndex(urls.indexOf(url));
    if (!open) {
      setOpen(true);
    }
  };
  return (
    <>
      <div className="my-8 columns-1 lg:columns-2 gap-4">
        {/* {urls.slice(0, urls.length / 2).map((url, idnex) => (
          <Img
            url={url}
            key={idnex}
            onClick={(url: string) => onChangeUrl(url)}
          />
        ))}
      </div>
      <div className="box">
        {urls.slice(urls.length / 2).map((url, idnex) => (
          <Img
            url={url}
            key={idnex}
            onClick={(url: string) => onChangeUrl(url)}
          />
        ))} */}
        {urls.map((url, idnex) => (
          <Img
            url={url}
            key={idnex}
            onClick={(url: string) => onChangeUrl(url)}
          />
        ))}
      </div>
      {open && (
        <Lightbox
          mainSrc={urls[index]}
          nextSrc={urls[(index + 1) % urls.length]}
          prevSrc={urls[(index + urls.length - 1) % urls.length]}
          onCloseRequest={() => setOpen(false)}
          onMovePrevRequest={() =>
            setIndex((index + urls.length - 1) % urls.length)
          }
          onMoveNextRequest={() => setIndex((index + 1) % urls.length)}
        />
      )}
    </>
  );
}
export function Img({ url, onClick }: { url: any; onClick: Function }) {
  return (
    <div
      onClick={() => onClick(url)}
      className="w-full mb-4 cursor-pointer
      hover:-translate-y-1
      hover:scale-110
      ease-in-out
      delay-50
      duration-300"
    >
      <Image alt="loading" src={url} width={720} height={480} quality={100} />
    </div>
  );
}

// export function ImgUpLoad() {
//   const [fileList, setFileList] = useState([]);
//   const [open, setOpen] = useState(false);
//   const [loading, setLoading] = useState(false);

//   const handleSubmit = () => {
//     const uuids = fileList
//       .filter((item) => item.response.status === "done")
//       .map((item) => item.response.uuid);
//     setLoading(true);
//     fetch(`http://127.0.0.1:3001/saveImgs`, {
//       method: "POST",
//       headers: {
//         "Content-Type": "application/json",
//       },
//       body: JSON.stringify({ uuids }),
//     })
//       .then((res) => res.json())
//       .then((res) => {
//         message.success("上传成功");
//         setOpen(false);
//         setLoading(false);
//       })
//       .catch((err) => {
//         message.error("上传失败");
//         setLoading(false);
//       });
//   };
//   const props = {
//     action: "http://127.0.0.1:3001/uploadImgs",
//     onChange({ file, fileList }) {
//       setFileList([...fileList]);
//     },
//     multiple: true,
//     maxCount: 9,
//     fileList,
//     onRemove: (file) => {
//       const index = fileList.indexOf(file);
//       const newFileList = fileList.slice();
//       newFileList.splice(index, 1);
//       setFileList(newFileList);
//     },
//     showUploadList: {
//       showDownloadIcon: true,
//       downloadIcon: "Download",
//       showRemoveIcon: true,
//       removeIcon: (
//         <StarOutlined
//           onClick={(e) => console.log(e, "custom removeIcon event")}
//         />
//       ),
//     },
//   };
//   return (
//     <div style={{ position: "absolute", right: 20, top: 20 }}>
//       <Button onClick={() => setOpen(true)} icon={<UploadOutlined />}>
//         上传图片
//       </Button>
//       <Modal
//         title="图片上传"
//         open={open}
//         onCancel={() => {
//           setOpen(false);
//           setFileList([]);
//         }}
//         confirmLoading={loading}
//         destroyOnClose={true}
//         onOk={handleSubmit}
//         okText="确定上传"
//         cancelText="取消"
//         width={"50%"}
//       >
//         <Row justify={"center"}>
//           <Upload {...props}>
//             <Button icon={<UploadOutlined />}>点击上传</Button>
//           </Upload>
//         </Row>
//       </Modal>
//     </div>
//   );
// }
